<template>
  <div class="user-moments">
    <div class="user-moments-container">
      <!--      发布动态-->
      <div class="user-moments-post">
        <input
          placeholder="有什么想和大家分享的？"
          class="user-moments-post-input"
          v-model="postTxt"
        />
        <div class="user-moments-post-img">
          <img
            :src="imagePreview"
            alt=""
            v-show="imagePreview"
            class="uploaded-img"
          />
        </div>
        <div class="user-moments-post-tools">
          <div class="user-moments-post-tools-img">
            <label for="file-input">
              <img src="@/assets/videoicon/uploadImg.png" alt="" class="icon" />
            </label>
            <input
              type="file"
              id="file-input"
              style="display: none"
              accept="image/*"
              @change="handleImageUpload"
            />
          </div>
          <el-button type="primary" @click="addUserMoments">发布</el-button>
        </div>
      </div>
      <!--      导航栏-->
      <div class="user-moments-nav">
        <el-menu
          :default-active.sync="activeIndex"
          class="user-moments-nav-menu"
          mode="horizontal"
        >
          <el-menu-item
            v-for="menu in menus"
            :key="menu.index"
            :index="menu.index"
            class="user-moments-nav-menu-item"
            @click="handleSelect(menu.index, menu.type)"
          >
            {{ menu.name }}
          </el-menu-item>
        </el-menu>
      </div>
      <!--      动态列表-->
      <div class="user-moments-list">
        <div
          class="user-moments-list-item"
          v-for="(moment, index) in moments"
          :key="index"
        >
          <div class="user-moments-list-item-userInfo">
            <img :src="moment.userInfo.avatar" alt="" />
            <div class="user-moments-list-item-userInfo-detail">
              <div style="color: #f69; font-weight: bold; margin-bottom: 10px">
                {{ moment.userInfo.nick }}
              </div>
              <div style="color: darkgray">发布于：{{ moment.createTime }}</div>
            </div>
          </div>
          <div class="user-moments-list-item-moment">
            <div class="user-moments-list-item-moment-txt">
              {{ moment.content.contentDetail.txt }}
            </div>
            <div
              class="user-moments-list-item-moment-img"
              v-if="moment.type === '1'"
            >
              <img :src="moment.content.contentDetail.img" alt="" />
            </div>
            <div
              class="user-moments-list-item-moment-video"
              v-if="moment.type === '0'"
            >
              <img :src="moment.content.contentDetail.thumbnail" alt="" />
              <div class="user-moments-list-item-moment-video-detail">
                <div
                  class="user-moments-list-item-moment-video-detail-title"
                  @click="jumpToVideoDetail(moment.content.contentDetail.id)"
                  style="cursor: pointer"
                >
                  {{ moment.content.contentDetail.title }}
                </div>
                <div
                  class="user-moments-list-item-moment-video-detail-description"
                >
                  {{ moment.content.contentDetail.description }}
                </div>
                <div class="user-moments-list-item-moment-video-detail-count">
                  <div
                    class="user-moments-list-item-moment-video-detail-viewCount"
                  >
                    <img src="@/assets/videoicon/viewCount.png" alt="" />
                    {{
                      moment.content.contentDetail.viewCount
                        ? moment.content.contentDetail.viewCount
                        : 0
                    }}
                  </div>
                  <div
                    class="user-moments-list-item-moment-video-detail-danmuCount"
                  >
                    <img src="@/assets/videoicon/danmuCount.png" alt="" />
                    {{
                      moment.content.contentDetail.danmuCount
                        ? moment.content.contentDetail.danmuCount
                        : 0
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--        <infinite-loading-->
        <!--          :identifier="infiniteId"-->
        <!--          @infinite="pageListMoments"-->
        <!--        ></infinite-loading>-->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// import InfiniteLoading from 'vue-infinite-loading' // 假设你已经安装并配置了这个组件

// 模拟用户发布的文本内容
const postTxt = ref('')

// 图片上传预览
const imagePreview = ref('')

// 处理图片上传事件
function handleImageUpload(event) {
  const file = event.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      imagePreview.value = e.target.result
    }
    reader.readAsDataURL(file)
  }
}

// 添加用户动态的方法（这里只是个示例）
function addUserMoments() {
  console.log('发布动态:', postTxt.value, imagePreview.value)
  // 实际应用中，这里应该有逻辑来将动态添加到服务器或本地状态管理中
}

// 定义假数据：动态列表
const moments = ref([
  {
    userInfo: {
      avatar: 'https://via.placeholder.com/50',
      nick: '用户昵称',
    },
    createTime: '2024-01-15',
    content: {
      contentDetail: {
        txt: '这是第一条动态的文字内容。',
        img: 'https://via.placeholder.com/300x200', // 如果是图片类型
        thumbnail: 'https://via.placeholder.com/150', // 如果是视频类型
        title: '视频标题', // 如果是视频类型
        description: '视频描述', // 如果是视频类型
        viewCount: 1234,
        danmuCount: 567,
        id: 'video-id-1', // 如果是视频类型
      },
    },
    type: '1', // 类型：'0'-视频, '1'-图片
  },
  {
    userInfo: {
      avatar: 'https://via.placeholder.com/50',
      nick: '用户昵称',
    },
    createTime: '2024-01-14',
    content: {
      contentDetail: {
        txt: '这是第二条动态的文字内容。',
        thumbnail: 'https://via.placeholder.com/150',
        title: '另一个视频标题',
        description: '另一个视频描述',
        viewCount: 890,
        danmuCount: 123,
        id: 'video-id-2',
      },
    },
    type: '0',
  },
  // 可以继续添加更多动态...
])

// 定义假数据：导航菜单
const menus = ref([
  { name: '全部', index: '0', type: 'all' },
  { name: '图片', index: '1', type: 'image' },
  { name: '视频', index: '2', type: 'video' },
])

// 当前激活的菜单索引
const activeIndex = ref('0')

// 处理菜单选择事件
function handleSelect(index, type) {
  console.log('选择了菜单:', index, type)
  // 根据选中的菜单项更新显示的动态列表
}

// 跳转到视频详情页的方法（这里只是个示例）
function jumpToVideoDetail(videoId) {
  console.log('跳转到视频详情:', videoId)
  // 实际应用中，这里应该有逻辑来导航到视频详情页面
}

// 无限加载组件的标识符
const infiniteId = ref(0)

// 页面列表方法（这里只是个示例）
function pageListMoments($state) {
  // 这里应该是获取更多动态数据的逻辑
  setTimeout(() => {
    // 假装从服务器获取更多数据
    $state.loaded()
  }, 1000)
}
</script>

<style scoped lang="scss">
.user-moments-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #4e4e7a;

  .user-moments-post {
    width: 50%;
    margin-top: 10px;
    padding: 10px;
    background-color: white;
    border-radius: 5px;
    margin-bottom: 10px;

    .user-moments-post-input {
      min-height: 40px;
      width: 100%;
      outline: none;
      border: none;
      font-size: 16px;
    }

    .user-moments-post-img {
      .uploaded-img {
        height: 180px;
        width: 320px;
      }
    }

    .user-moments-post-tools {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-content: center;

      .user-moments-post-tools-img {
        display: flex;
        align-items: center;

        .icon {
          cursor: pointer;
          height: 20px;
          width: 20px;
        }
      }
    }
  }

  .user-moments-nav {
    width: 50%;
    background-color: white;
    border-radius: 5px;

    .user-moments-nav-menu {
      padding: 10px;
      border-radius: 5px;
      margin-top: 10px;
      margin-bottom: 10px;

      el-menu-item {
        font-size: 18px;
      }
    }
  }

  .user-moments-list {
    width: 50%;
    margin-top: 10px;

    .user-moments-list-item {
      background-color: white;
      padding: 20px;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
      border-radius: 5px;

      .user-moments-list-item-userInfo {
        display: flex;
        align-items: center;
        img {
          max-height: 60px;
          max-width: 60px;
          border-radius: 5px;
        }
        .user-moments-list-item-userInfo-detail {
          margin-left: 20px;
        }
      }
      .user-moments-list-item-moment {
        display: flex;
        flex-direction: column;
        padding: 40px;

        .user-moments-list-item-moment-txt {
          font-size: 18px;
          margin-bottom: 10px;
        }

        .user-moments-list-item-moment-img {
          img {
            max-height: 180px;
            max-width: 320px;
            border-radius: 5px;
          }
        }
        .user-moments-list-item-moment-video {
          background-color: #f5f5f5;
          border-radius: 5px;
          display: flex;
          padding: 10px;

          img {
            max-height: 180px;
            max-width: 320px;
            border-radius: 5px;
          }
          .user-moments-list-item-moment-video-detail {
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .user-moments-list-item-moment-video-detail-title {
              font-size: 20px;
            }

            .user-moments-list-item-moment-video-detail-description {
              color: gray;
            }

            .user-moments-list-item-moment-video-detail-count {
              display: flex;
              margin-top: 20px;

              .user-moments-list-item-moment-video-detail-viewCount {
                display: flex;
                align-items: center;
                margin-right: 20px;
                img {
                  max-height: 20px;
                  max-width: 20px;
                  margin-right: 5px;
                }
              }
              .user-moments-list-item-moment-video-detail-danmuCount {
                display: flex;
                align-items: center;
                margin-right: 20px;
                img {
                  max-height: 20px;
                  max-width: 20px;
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
